<!--
<template>
    <div id="container">
        <div class="content">
            <div class="count-down-container" style="-webkit-app-region: no-drag;">
                <div class="time-action">
                    <div class="timing-box">
                        <div class="timing-minutes-action first">
                            <div class="timing-minutes">
                                <div class="time-font">
                                    {{minuteTens}}
                                </div>
                            </div>
                        </div>
                        <div class="timing-minutes-action second">
                            <div class="timing-minutes">
                                <div class="time-font">
                                    {{minuteUnits}}
                                </div>
                            </div>
                        </div>
                        <span class="timing-minutes-colon">:</span>
                        <div class="timing-minutes-action third">
                            <div class="timing-minutes">
                                <div class="time-font">
                                    {{secondTens}}
                                </div>
                            </div>
                        </div>
                        <div class="timing-minutes-action last">
                            <div class="timing-minutes">
                                <div class="time-font">
                                    {{secondUnits}}
                                </div>
                            </div>
                        </div>
                        <div class="colseSmall">
                            退出小窗
                        </div>
                    </div>
                </div>
              
            </div>
            <audio id="countdown-music1" preload="auto">
                <source src="../../assets/sound/music1.mp3" type="audio/mpeg">
            </audio>
            <audio id="countdown-music2" preload="auto">
                <source  src="../../assets/sound/music2.mp3" type="audio/mpeg">
            </audio>
            <audio id="countdown-music3" preload="auto">
                <source  src="../../assets/sound/music3.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>
</template>

<script>

export default {
    name: "mini",
    data () {
        return {
            minuteTens: 0,
            minuteUnits: 0,
            secondTens: 0,
            secondUnits: 0,
            isStart: false,
            reStartOrContinue: false,
            bgmusic:false, 
            music_type:'1',
        }
    },
    watch:{
        secondUnits(val){
            if (val === 0 && this.minuteTens === 0 && this.minuteUnits === 0 && this.secondTens === 0 ) {
                console.log('时间到');
                this.handlePlayLoad()
            }
        },
    },
    mounted () {
        if (window.countDownTimeOut) {
            clearInterval(window.countDownTimeOut);
            window.countDownTimeOut = null;
        }
    },
    computed: {
        zeroTime () {
            return this.minuteTens === 0 && this.minuteUnits === 0 && this.secondTens === 0 && this.secondUnits === 0
        },
    },
    methods: {
        handlePlay(){
            if (this.music_type === '1') {
                document.getElementById('countdown-music1').play();
            }else if (this.music_type === '2') {
                document.getElementById('countdown-music2').play();
            }else if (this.music_type === '3') {
                document.getElementById('countdown-music3').play();
            }
        },
        handlePlayPause(){
            if (this.music_type === '1') {
                document.getElementById('countdown-music1').pause();
            }else if (this.music_type === '2') {
                document.getElementById('countdown-music2').pause();
            }else if (this.music_type === '3') {
                document.getElementById('countdown-music3').pause();
            }
        },
        handlePlayLoad(){
            if (this.music_type === '1') {
                document.getElementById('countdown-music1').load();
            }else if (this.music_type === '2') {
                document.getElementById('countdown-music2').load();
            }else if (this.music_type === '3') {
                document.getElementById('countdown-music3').load();
            }
        },
        startCount () {
            if (!this.isStart) {
                if (this.minuteTens === 0 && this.minuteUnits === 0 && this.secondTens === 0 && this.secondUnits === 0) {
                    this.$message.warning("请先选择时间！")
                    return
                }
                this.setTimeInterval()
                this.handlePlay()
                this.isStart = true;
            } else {
                if (!this.zeroTime) {
                    clearInterval(window.countDownTimeOut)
                    this.reStartOrContinue = true
                    this.isStart = false
                    this.handlePlayPause()
                }else{
                }
            }
        },
        setTimeInterval () {
            if (window.countDownTimeOut) {
                clearInterval(window.countDownTimeOut);
                window.countDownTimeOut = null;
            }
            let totalSeconds = (this.minuteTens * 10 + this.minuteUnits) * 60 + (this.secondTens * 10 + this.secondUnits);
            let _this = this;
            window.countDownTimeOut = setInterval(function () {
                if (totalSeconds === 0) {
                    clearInterval(window.countDownTimeOut);
                } else {
                    totalSeconds = totalSeconds - 1;
                }
                _this.countDown(totalSeconds);
            }, 1000);
        },

        colseSmall(){
            this.$electron.ipcRenderer.send("close-resource-window", {
              metaId: "countDownSmall",
            });
            this.$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'countDown', userId: '', lessonId:''})
        },
    }
}
</script>

<style lang="scss">
#container {
    width: 100%;
    min-height: 100vh;
   

     .content{
        display: flex;
        justify-content: center;
    }
    .count-down-container {
        width: 350px;
        height: 180px;
        background: url("../../assets/img/countdownSmall.png") no-repeat center center;
        background-size: cover;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // flex-direction: column;

        .time-action {
            width: 900px;
            height: 360px;
            border-radius: 10px;
            .timing-box {
                width: 100%;
                position: relative;
                &::before {
                    content: "分";
                    position: absolute;
                    top: 60px;
                    left: 236px;
                    color: #909399 ;
                    font-size: 32px;
                }
                &::after {
                    content: "秒";
                    position: absolute;
                    top: 60px;
                    right: 238px;
                    color: #909399 ;
                    font-size: 32px;
                }

                .timing-minutes-action {
                    height: 222px;
                    width: 146px;
                    position: relative;
                    &.first {
                        position: absolute;
                        background: url("../../assets/img/time_count_small.png") no-repeat center center;
                        border-radius: 6px;
                        top: 118px;
                        left: 90px;
                    }
                    &.second {
                        position: absolute;
                         background: url("../../assets/img/time_count_small.png") no-repeat center center;
                        border-radius: 6px;
                        top: 118px;
                        left: 267px;
                    }
                    &.third {
                        position: absolute;
                         background: url("../../assets/img/time_count_small.png") no-repeat center center;
                        border-radius: 6px;
                        top: 118px;
                        right: 267px;
                    }
                    &.last {
                        position: absolute;
                        background: url("../../assets/img/time_count_small.png") no-repeat center center;
                        border-radius: 6px;
                        top: 118px;
                        right: 91px;
                    }

                    .timing-minutes {
                        font-size: 180px;
                        margin: 50px 20px;
                    }

                    .timing-plus-add {
                        width: 147px;
                        height: 41px;
                        background: #fff;
                        border-radius: 50px;
                        position: relative;
                        top: 49px;

                        .add_plus{
                            display: flex;
                            justify-content: space-between;
                            padding: 0 26px;
                        }
                        .add{
                            width: 22px;
                            height: 21px;
                            font-size: 43px;
                            font-weight: 400;
                            color: #909399;
                            position: relative;
                            top: -10px;
                        }
                        .plus{
                            width: 22px;
                            height: 21px;
                            font-size: 43px;
                            font-weight: 400;
                            color: #909399;
                            position: relative;
                            top: -10px;
                        }
                    }
                }

                .timing-minutes-colon {
                    position: absolute;
                    top: 204px;
                    left: 440px;
                    text-align: center;
                    font-weight: 600;
                    font-size: 73px;
                    line-height: 43px;
                    color: #303133 ;
                    float: left;
                }

                .time-font {
                    width: 61px;
                    height: 95px;
                    font-size: 180px;
                    font-weight: 400;
                    color: #303133 ;
                    line-height: 95px;
                }
            }
        }

        .el-button {
            span {
                font-size: 36px;
                color: rgba(255, 255, 255, 1);
            }
        }
    }

}
</style>
-->